<template>
	<div class="faccont">
		<el-row class="helptitle">设备管理</el-row>
		<div class="helpmain">
			<div class="f_main">
				<el-row class="facselect">
					<el-col :span="12" style="text-align:left">
						<el-select v-model="value" placeholder="请选择">
							<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="12" style="text-align:right">
						<!-- <i class="el-icon-search"></i> -->
						<el-input placeholder="请输入内容" prefix-icon="el-icon-search"  v-model="UavName"></el-input>
					</el-col>
				</el-row>
				<div class="greyline"></div>
				<el-row>
					<router-link  to="/addfacility"><el-button class="submitlist"><i class="el-icon-plus"></i>添加设备</el-button></router-link>
				</el-row>
				<el-row :gutter="20">
					<el-scrollbar :style="{'height':(curHeight*0.82)+'px'}"> 
						<el-col :span="12" v-for="(item,index) in detailList" :key="index" style="padding:5px">
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span style="font-weight:500;font-size:.15rem">{{item.company}}-{{item.title}}</span>
									<router-link :to="{path:'/addfacility',query:{id:item.id}}" style="float: right; padding: 3px 0" type="text">
										<el-tooltip class="item" effect="light" content="修改" placement="right-end">
											<i class="el-icon-more" style="color:#4E7CAC"></i>
										</el-tooltip>
									</router-link>
								</div>
								<div>
								<el-row :gutter="10">
									<el-col :span="11">
										<el-image :src="item.url" fit="scale-down"	style="width:100%;height:167px;overflow:hidden"></el-image>
									</el-col>
									<el-col :span="13" style="height:167px">
										<el-row >
											<el-col class="facdetial" :span="15">飞机型号：</el-col>
											<el-col class="facdetial" :span="9">{{item.name}}</el-col>
										</el-row>
										<el-row >
											<el-col class="facdetials" :span="15">机身重量(kg)：</el-col>
											<el-col class="facdetials" :span="9">{{item.plane_weight}}</el-col>
										</el-row>
										<el-row >
											<el-col class="facdetial" :span="15">起飞重量(kg)：</el-col>
											<el-col class="facdetial" :span="9">{{item.max_weight}}</el-col>
										</el-row>
										<el-row >
											<el-col class="facdetials" :span="15">最大航程(km)：</el-col>
											<el-col class="facdetials" :span="9">{{item.max_voyage}}</el-col>
										</el-row>
										<el-row >
											<el-col class="facdetial" :span="15">巡航速度(m/s)：</el-col>
											<el-col class="facdetial" :span="9">{{item.cruise_speed}}</el-col>
										</el-row>
										<el-row>
											<el-col class="facdetials" :span="15">动力方式：</el-col>
											<el-col class="facdetials" :span="9">{{item.power_mode==1?'油动':'电动'}}</el-col>
										</el-row>
										<el-row >
											<el-col class="facdetial" :span="15">最大载荷(kg)：</el-col>
											<el-col class="facdetial" :span="9">{{item.max_payload}}</el-col>
										</el-row>
									</el-col>
									</el-row>
									<el-row style="margin-top:16px">
										<el-table :data="item.planes" border style="width: 100%" height="140px" :header-cell-style="{background:'#81A1C4',color:'#000'}" >
											<el-table-column	prop="name" label="飞机编号" width="auto"></el-table-column>
											<el-table-column	prop="title" label="飞机名称" width="auto"></el-table-column>
											<el-table-column	prop="uas_serial_id" label="标识码"		width="180">
												<template slot-scope="scope">
													<span style="color:#4084ca;padding-right:15px">{{scope.row.uas_serial_id}}</span>
													<img src="../../assets/uimg/update_uav.png" @click="_updateUav(scope.row)"/>
													&nbsp;
													<img src="../../assets/uimg/delete_ic.png" @click="open(scope.row)"/>
												</template>
											</el-table-column>
										</el-table>
									</el-row>
									<div class="addbtn" @click="addplans(item.id)">
									添加飞机
									</div>
								</div>
							</el-card>
						</el-col>
					</el-scrollbar>
				</el-row>
			</div>
		</div>
		<el-dialog :visible.sync="dialogFormVisible">
			<h2 v-if="showhid==false" class="h2title">添加飞机</h2>
			<el-form class="addplan" v-if="showhid==false">
				<el-form-item label="飞机名称：" >
					<el-input v-model="planname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="飞机编号：" >
					<el-input v-model="planid" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div class="biaoshi" v-if="showhid==true">
				<p style="font-size:16px">设备标识码</p>
					<h1 style="font-size:36px;color:#347dc7">{{biaoshima}}</h1>
				<p style="font-size:16px">申请通过，请妥善保管您的设备唯一标识码！</p>
			</div>
			<div slot="footer" class="dialog-footer">
				<div class="footer-di" v-if="showhid==false">
					<a><div class="backlo" @click="dialogFormVisible = false">取 消</div></a>
					<el-button class="submitlist" @click="handsum">提交</el-button>
				</div>
				<div class="footer-di" v-if="showhid==true">
					<div class="backlo" @click="backadd"><i class="el-icon-back"></i>返回</div>
					<div class="backlo" @click="dialogFormVisible = false">如何接入？</div>
				</div>
			</div>
		</el-dialog>
		<el-pagination
      		@current-change="_handleCurrentChange"
			:hide-on-single-page="false"
			:total="count"
			:page-size="size"
			:current-page.sync="page"
			layout="prev, pager, next">
		</el-pagination>
	</div>
</template>
<script>
	import request2 from "../../utils/request-new";
	export default {
		name:'Facility',
		data(){
			return{
				UavName:'',//飞机类型名称
				curHeight:0,
				options:[{
					value:'0',
					label:'无人机'
				},{
					value:'1',
					label:'无人潜艇'
				},{
					value:'',
					label:''
				}],
				value:'0',
				detailList:[],
				planname:'',
				planid:'',
				dialogFormVisible:false,
				showhid:false,
				biaoshima:'',
				planmodel:'',
				size:10,
				page:1,
				count:0,
				uav_id:'',
			}
		},
		mounted(){
			this.curHeight = document.body.offsetHeight;
			this.planerequest();
			this.debounced=this._.debounce(this._searchPlan, 350) //防抖
			this.debouncedList=this._.debounce(this.planerequest, 350) //防抖
		},
		watch:{
			UavName(e){
				this.page=1
				if(e!=''){
					this.debounced()
				}else{
					this.debouncedList()
				}
			}
		},
		methods:{
			_handleCurrentChange(e){
				if(this.UavName==''){
					this.planerequest(e)
				}else{
					this._searchPlan(e)
				}
			},
			planerequest(page=1){
				request2({
					url: "/plane/planeModelList",
					method: "post",
					data: {
						token: this.$store.getters.token,
						page_size:this.size,
						page_index:page,
					}
				})
				.then(response => {
					this.detailList=response.data.data
					this.count=(response.data.count-0)
				})
			},
			_searchPlan(page=1){ //搜索飞机
				request2({
					url: "/plane/searchPlaneModelList",
					method: "post",
					data: {
						token: this.$store.getters.token,
						name:this.UavName,
						page_size:this.size,
						page_index:page,
					}
				})
				.then(response => {
					this.detailList=response.data.data
					this.count=(response.data.count-0)
				})
			},
			//添加飞机按钮
			addplans(par){
				this.uav_id=''
				this.planmodel=par;
				this.dialogFormVisible = true;
			},
			//添加飞机提交
			handsum(){
				if(this.planid==''){
					this.$message({
						type: 'warning',
						message: '请输入飞机编码！'
					}); 
					return;
				}
				if(this.planname==''){
					this.$message({
						type: 'warning',
						message: '请输入飞机名称！'
					}); 
					return;
				}
				let url=''
				if(this.uav_id==''){
					url='/plane/addPlane'
				}else{
					url='/plane/updatePlane'
				}
				this.addplannum(url);
			},
			//添加请求接口
			addplannum(url){
				request2({
					url:url,
					method: "post",
					data: {
						token: this.$store.getters.token,
						name:this.planid,				//飞机编码
						title:this.planname,			//飞机名称
						id:this.uav_id, //飞机id
						planeModel_id:this.planmodel    //类型id
					}
				})
				.then(response => {
					this.showhid=true,
					this.biaoshima=response.message;
					this.planname='',
					this.planid=''
				})
			},
			//标识码返回
			backadd(){
				this.dialogFormVisible=false;
				this.showhid=false;
				this.biaoshima='';
				this.planerequest();
			},
			_updateUav(row){ //修改
				this.uav_id=row.id
				this.planname=row.title
				this.planid=row.name
				this.dialogFormVisible = true;
			},
			// 删除飞机
			open(row){ 
				this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					this.deletePlane(row);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			deletePlane(row){
				request2({
					url: "/plane/deletePlane",
					method: "post",
					data:{
						token: this.$store.getters.token,
						id:row.id
					}
				})
				.then(response => {
					if(status==0){
						this.planerequest();
						this.$message({
							type: 'success',
							message: response.message
						}); 
					}else{
						this.$message({
							type: 'warning',
							message: response.message
						}); 
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.faccont{
		.el-pagination {
			text-align: center;
			margin-bottom: 0.3rem;
		}
		.el-icon-delete{
			color: #347dc7;
			padding-left: 10px;
			font-weight: 600;
			cursor: pointer;
		}

		.helptitle{
			color: #347dc7;
			padding: 0px 0 15px 0;
			text-align: center;
			font-size: 22px;
			font-weight: 500;
			padding-top: 20px;
		}
		.helpmain{
			margin-left: auto;
			margin-right: auto;
			//  background-color: #fff;
			width: 80%;
			margin-bottom: 50px;
		}
		.greyline{
			width: 100%;
			height: 2px;
			background-color: rgb(212, 212, 212);
			margin-bottom: 20px;
		}
		.f_main{
			width: 80%;
			margin: 0 auto;
		}
		//选择器样式
		.facselect{
			.el-select .el-input__inner:focus{
				border-color: transparent;
			}
			.el-select:hover .el-input__inner{
				border-color: transparent;
			}
			.el-input__inner{
				background-color: transparent;
				height: 30px;
				line-height: 30px;
				border-color: transparent;
				color: #000;
			}
			.el-input__icon{
				line-height: 30px;
			}
			.el-input{
				width: 60%;
			}
			.el-select .el-input.is-focus .el-input__inner{
				border-color: transparent; 
			}

		}
		.submitlist{
			width: 40%;
			background-color: #337DC7;
			color:#fff;
			margin-bottom: 10px;
		}
		//卡片样式
		.el-card{
			background-color: #fff;
			border: 1px solid #eee;
			border-radius: 0px;
			box-shadow: none;
			padding: 15px;
		}
		.facdetial{
			padding: 5px;
			background-color: #DAE3EE;
			font-size: 14px;
			color: #000;
			border-left:2px solid #fff
		}
		.facdetials{
			padding: 5px;
			background-color: #81A1C4;
			font-size: 14px;
			color: #000;
			border-left:2px solid #fff
		}
		.el-table td, .el-table th{
			padding: 5px 0px
		}
		.el-table{
			border: 1px solid #81A1C4;
		}
		.el-table td{
			border: 1px solid #DAE3EE;
		}
		.addbtn{
			margin-top: 10px;
			background-color: #DAE3EE;
			padding:5px;
			text-align: center;
			color: #337DC7;
			font-weight: 500;
			cursor: pointer;
		}

		//
		.el-dialog{
			background-color: #fff;
			.el-input{
				width: 80%
			}
			.addplan{
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
			}
		}
		.el-dialog .el-dialog__header{
			background-color: #fff;
			text-align: center;
			// padding: 10px 10px 10px 10px;
		}
		.el-dialog__body{
			padding: 0 20px;
		}
		.h2title{
			color:#337DC7;
			text-align:center;
			margin-bottom:30px;
			font-weight: 500;
		}
		.biaoshi{
			color: #606266;
			text-align: center;
			margin-bottom: 30px;
		}
		.dialog-footer{
			border-top: 2px solid #eee;
			.footer-di{
				display: flex;
				justify-content: space-between;
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
			}
			.backlo{
				color: #337DC7;
				font-size: 15px;
				font-weight: 500;
				margin-top: 28px;
			}
			.submitlist{
				width: 100px;
				background-color: #337DC7;
				color:#fff;
				margin-top:20px;
				// margin-bottom: 40px;
			}
			.el-button{
				padding: 8px 10px;
				border-radius: 0px
			}
		}
	}
	</style>
	<style lang="scss">
	.faccont{
		//卡片样式

		.box-card{
			color:#4E7CAC;
			font-size: 15px;
		}
		.clearfix{
			font-weight: 700;
		}
		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}
		.clearfix:after {
			clear: both
		}
	}
</style>